<template>
  <div>
    <slot></slot>
  </div>
</template>

<script>
import { findComponentsDownward } from "@utils/assist";
import emitter from "@mixins/emitter";
export default {
  name: "iCheckboxGroup",
  mixins: [emitter],
  props: {
    value: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      currentValue: this.value,
      childrens: []
    };
  },
  methods: {
    updateModel(update) {
      this.childrens = findComponentsDownward(this, "iCheckbox"); //findComponents 系列方法最终都是返回组件的实例，进而可以读取或调用该组件的数据和方法
      if (this.childrens) {
        const { value } = this; // es6扩展，结果是:"option1","option3"
        this.childrens.forEach(child => {
          //console.log(child); //每个实例
          child.model = value;
          if (update) {
            //修改子组件的值
            child.currentValue = value.indexOf(child.label) > 0;
            child.group = true;
          }
        });
      }
    },
    change(data) {
      this.currentValue = data; //更新父组件的属性值
      /**
       * input是提供给外部直接使用组件v-model用的，on-change也是外部回调使用的，并不是给form校验用的，给form校验使用的事件是on-form-change
       */
      this.$emit("input", data);
      this.$emit("on-change", data);
      this.dispatch("iFormItem", "on-form-change", data); //用于父子组件间通过自定义事件通信
    }
  },
  mounted() {
    //将CheckboxGroup 的 value，赋值给 Checkbox 的 model，并根据 Checkbox 的 label，设置一次当前 Checkbox 的选中状态。
    this.updateModel(true);
  },
  watch: {
    value() {
      this.updateModel(true);
    }
  }
};
</script>

<style></style>
